---
title: Tailwind CSS Accordion for React - Material Tailwind
description: Customise your web projects with our easy-to-use accordion component for Tailwind CSS and React using Material Design guidelines.
navigation:
  [
    "accordion",
    "default-accordion",
    "accordion-always-open",
    "accordion-all-open",
    "accordion-custom-icon",
    "accordion-custom-animation",
    "accordion-custom-styles",
    "accordion-disabled",
    "accordion-props",
    "accordion-header-props",
    "accordion-body-props",
    "types-animate",
    "accordion-theme",
    "accordion-theme-object-type",
    "accordion-theme-customization",
    "more-examples"
  ]
github: accordion
prev: screens
next: alert
---

<DocsTitle href="accordion">
# Tailwind CSS Accordion - React
</DocsTitle>

Use our React Accordion component to allow the user to show and hide sections of related content on a page. There are many ways to use this component, like displaying a list of FAQs, showing various menus and submenus, displaying the locations of a particular company, and so on.

See below our simple and versatile accordion examples that you can use in your projects. All our examples are based on React and styled with Tailwind CSS. We also included some Accordion props that are available.

<br />

## Accordion Examples

Here are some examples of how you can implement different types of accordions.

<DocsTitle href="default-accordion">
## Default Accordion
</DocsTitle>

This pre-styled component example can be used by developers looking for a simple and functional accordion to present information efficiently.

<CodePreview link="accordion#accordion" component={<AccordionExamples.DefaultAccordion />}>
```jsx
import React from "react";
import {
  Accordion,
  AccordionHeader,
  AccordionBody,
} from "@material-tailwind/react";

export function DefaultAccordion() {
  const [open, setOpen] = React.useState(1);

  const handleOpen = (value) => setOpen(open === value ? 0 : value);

  return (
    <>
      <Accordion open={open === 1}>
        <AccordionHeader onClick={() => handleOpen(1)}>What is Material Tailwind?</AccordionHeader>
        <AccordionBody>
          We&apos;re not always in the position that we want to be at. We&apos;re constantly
          growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
          ourselves and actualize our dreams.
        </AccordionBody>
      </Accordion>
      <Accordion open={open === 2}>
        <AccordionHeader onClick={() => handleOpen(2)}>
          How to use Material Tailwind?
        </AccordionHeader>
        <AccordionBody>
          We&apos;re not always in the position that we want to be at. We&apos;re constantly
          growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
          ourselves and actualize our dreams.
        </AccordionBody>
      </Accordion>
      <Accordion open={open === 3}>
        <AccordionHeader onClick={() => handleOpen(3)}>
          What can I do with Material Tailwind?
        </AccordionHeader>
        <AccordionBody>
          We&apos;re not always in the position that we want to be at. We&apos;re constantly
          growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
          ourselves and actualize our dreams.
        </AccordionBody>
      </Accordion>
    </>
  );
}
```
</CodePreview>

---

<DocsTitle href="accordion-always-open">
## Accordion Always Open
</DocsTitle>

You can configure a section of an Accordion to remain open at all times and not be affected by the opening or closing of adjacent sections by using a separate state variable (alwaysOpen). See the coded example below.

<CodePreview component={<AccordionExamples.AccordionAlwaysOpen />}>
```jsx
import React from "react";
import {
  Accordion,
  AccordionHeader,
  AccordionBody,
} from "@material-tailwind/react";

export function AccordionAlwaysOpen() {
  const [open, setOpen] = React.useState(0);
  const [alwaysOpen, setAlwaysOpen] = React.useState(true);

  const handleAlwaysOpen = () => setAlwaysOpen((cur) => !cur);
  const handleOpen = (value) => setOpen(open === value ? 0 : value);

  return (
    <>
      <Accordion open={alwaysOpen}>
        <AccordionHeader onClick={handleAlwaysOpen}>What is Material Tailwind?</AccordionHeader>
        <AccordionBody>
          We&apos;re not always in the position that we want to be at. We&apos;re constantly
          growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
          ourselves and actualize our dreams.
        </AccordionBody>
      </Accordion>
      <Accordion open={open === 1}>
        <AccordionHeader onClick={() => handleOpen(1)}>
          How to use Material Tailwind?
        </AccordionHeader>
        <AccordionBody>
          We&apos;re not always in the position that we want to be at. We&apos;re constantly
          growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
          ourselves and actualize our dreams.
        </AccordionBody>
      </Accordion>
      <Accordion open={open === 2}>
        <AccordionHeader onClick={() => handleOpen(2)}>
          What can I do with Material Tailwind?
        </AccordionHeader>
        <AccordionBody>
          We&apos;re not always in the position that we want to be at. We&apos;re constantly
          growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
          ourselves and actualize our dreams.
        </AccordionBody>
      </Accordion>
    </>
  );
}
```
</CodePreview>

---

<DocsTitle href="accordion-all-open">
## Accordion All Open
</DocsTitle>

Use this example if you want the accordion sections to be all initially set to be open by default. This is achieved by setting the state variables (openAcc1, openAcc2, openAcc3) to true during their initialization with the useState hook. 

<CodePreview component={<AccordionExamples.AccordionAllOpen />}>
```jsx
import React from "react";
import {
  Accordion,
  AccordionHeader,
  AccordionBody,
} from "@material-tailwind/react";

export default function Example() {
  const [openAcc1, setOpenAcc1] = React.useState(true);
  const [openAcc2, setOpenAcc2] = React.useState(true);
  const [openAcc3, setOpenAcc3] = React.useState(true);

  const handleOpenAcc1 = () => setOpenAcc1((cur) => !cur);
  const handleOpenAcc2 = () => setOpenAcc2((cur) => !cur);
  const handleOpenAcc3 = () => setOpenAcc3((cur) => !cur);

  return (
    <>
      <Accordion open={openAcc1}>
        <AccordionHeader onClick={handleOpenAcc1}>What is Material Tailwind?</AccordionHeader>
        <AccordionBody>
          We&apos;re not always in the position that we want to be at. We&apos;re constantly
          growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
          ourselves and actualize our dreams.
        </AccordionBody>
      </Accordion>
      <Accordion open={openAcc2}>
        <AccordionHeader onClick={handleOpenAcc2}>How to use Material Tailwind?</AccordionHeader>
        <AccordionBody>
          We&apos;re not always in the position that we want to be at. We&apos;re constantly
          growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
          ourselves and actualize our dreams.
        </AccordionBody>
      </Accordion>
      <Accordion open={openAcc3}>
        <AccordionHeader onClick={handleOpenAcc3}>
          What can I do with Material Tailwind?
        </AccordionHeader>
        <AccordionBody>
          We&apos;re not always in the position that we want to be at. We&apos;re constantly
          growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
          ourselves and actualize our dreams.
        </AccordionBody>
      </Accordion>
    </>
  );
}
```
</CodePreview>

---

<DocsTitle href="accordion-custom-icon">
## Accordion Custom Icon
</DocsTitle>

This example showcases how you can modify the open/close state icon for your react accordion component using the icon prop.

<CodePreview link="accordion#accordion-custom-icon" component={<AccordionExamples.AccordionCustomIcon />}>
```jsx
import React from "react";
import {
  Accordion,
  AccordionHeader,
  AccordionBody,
} from "@material-tailwind/react";

function Icon({ id, open }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={2}
      stroke="currentColor"
      className={`${id === open ? "rotate-180" : ""} h-5 w-5 transition-transform`}
    >
      <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
    </svg>
  );
}

export function AccordionCustomIcon() {
  const [open, setOpen] = React.useState(0);

  const handleOpen = (value) => setOpen(open === value ? 0 : value);

  return (
    <>
      <Accordion open={open === 1} icon={<Icon id={1} open={open} />}>
        <AccordionHeader onClick={() => handleOpen(1)}>What is Material Tailwind?</AccordionHeader>
        <AccordionBody>
          We&apos;re not always in the position that we want to be at. We&apos;re constantly
          growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
          ourselves and actualize our dreams.
        </AccordionBody>
      </Accordion>
      <Accordion open={open === 2} icon={<Icon id={2} open={open} />}>
        <AccordionHeader onClick={() => handleOpen(2)}>
          How to use Material Tailwind?
        </AccordionHeader>
        <AccordionBody>
          We&apos;re not always in the position that we want to be at. We&apos;re constantly
          growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
          ourselves and actualize our dreams.
        </AccordionBody>
      </Accordion>
      <Accordion open={open === 3} icon={<Icon id={3} open={open} />}>
        <AccordionHeader onClick={() => handleOpen(3)}>
          What can I do with Material Tailwind?
        </AccordionHeader>
        <AccordionBody>
          We&apos;re not always in the position that we want to be at. We&apos;re constantly
          growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
          ourselves and actualize our dreams.
        </AccordionBody>
      </Accordion>
    </>
  );
}
```
</CodePreview>

---

<DocsTitle href="accordion-custom-animation">
## Accordion Custom Animation
</DocsTitle>

You can modify the open/close state animation for the Accordion component using the animate prop. <Code>CUSTOM_ANIMATION</Code> is an object that defines the behavior of the accordion's mount and unmount animations. On mount (when the accordion section is opened), the scale is set to 1 (normal size). On unmount (when the accordion section is closed), the scale is reduced to 0.9, giving a slight shrinking effect.

<CodePreview component={<AccordionExamples.AccordionCustomAnimation />}>
```jsx
import React from "react";
import {
  Accordion,
  AccordionHeader,
  AccordionBody,
} from "@material-tailwind/react";

const CUSTOM_ANIMATION = {
  mount: { scale: 1 },
  unmount: { scale: 0.9 },
};

export function AccordionCustomAnimation() {
  const [open, setOpen] = React.useState(0);

  const handleOpen = (value) => setOpen(open === value ? 0 : value);

  return (
    <>
      <Accordion open={open === 1} animate={CUSTOM_ANIMATION}>
        <AccordionHeader onClick={() => handleOpen(1)}>What is Material Tailwind?</AccordionHeader>
        <AccordionBody>
          We&apos;re not always in the position that we want to be at. We&apos;re constantly
          growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
          ourselves and actualize our dreams.
        </AccordionBody>
      </Accordion>
      <Accordion open={open === 2} animate={CUSTOM_ANIMATION}>
        <AccordionHeader onClick={() => handleOpen(2)}>
          How to use Material Tailwind?
        </AccordionHeader>
        <AccordionBody>
          We&apos;re not always in the position that we want to be at. We&apos;re constantly
          growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
          ourselves and actualize our dreams.
        </AccordionBody>
      </Accordion>
      <Accordion open={open === 3} animate={CUSTOM_ANIMATION}>
        <AccordionHeader onClick={() => handleOpen(3)}>
          What can I do with Material Tailwind?
        </AccordionHeader>
        <AccordionBody>
          We&apos;re not always in the position that we want to be at. We&apos;re constantly
          growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
          ourselves and actualize our dreams.
        </AccordionBody>
      </Accordion>
    </>
  );
}
```
</CodePreview>

---

<DocsTitle href="accordion-custom-styles">
## Accordion Custom Styles
</DocsTitle>

You can use Tailwind CSS classes to add custom styles to the <Code>Accordion</Code> component.

<CodePreview component={<AccordionExamples.AccordionCustomStyles />}>
```jsx
import React from "react";
import {
  Accordion,
  AccordionHeader,
  AccordionBody,
} from "@material-tailwind/react";

export function AccordionCustomStyles() {
  const [open, setOpen] = React.useState(1);

  const handleOpen = (value) => setOpen(open === value ? 0 : value);

  return (
    <>
      <Accordion open={open === 1} className="mb-2 rounded-lg border border-blue-gray-100 px-4">
        <AccordionHeader
          onClick={() => handleOpen(1)}
          className={`border-b-0 transition-colors ${
            open === 1 ? "text-blue-500 hover:!text-blue-700" : ""
          }`}
        >
          What is Material Tailwind?
        </AccordionHeader>
        <AccordionBody className="pt-0 text-base font-normal">
          We&apos;re not always in the position that we want to be at. We&apos;re constantly
          growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
          ourselves and actualize our dreams.
        </AccordionBody>
      </Accordion>
      <Accordion open={open === 2} className="mb-2 rounded-lg border border-blue-gray-100 px-4">
        <AccordionHeader
          onClick={() => handleOpen(2)}
          className={`border-b-0 transition-colors ${
            open === 2 ? "text-blue-500 hover:!text-blue-700" : ""
          }`}
        >
          How to use Material Tailwind?
        </AccordionHeader>
        <AccordionBody className="pt-0 text-base font-normal">
          We&apos;re not always in the position that we want to be at. We&apos;re constantly
          growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
          ourselves and actualize our dreams.
        </AccordionBody>
      </Accordion>
      <Accordion open={open === 3} className="rounded-lg border border-blue-gray-100 px-4">
        <AccordionHeader
          onClick={() => handleOpen(3)}
          className={`border-b-0 transition-colors ${
            open === 3 ? "text-blue-500 hover:!text-blue-700" : ""
          }`}
        >
          What can I do with Material Tailwind?
        </AccordionHeader>
        <AccordionBody className="pt-0 text-base font-normal">
          We&apos;re not always in the position that we want to be at. We&apos;re constantly
          growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
          ourselves and actualize our dreams.
        </AccordionBody>
      </Accordion>
    </>
  );
}
```
</CodePreview>

<br />
The classes used in this example include:

· <Code>mb-2</Code>: adds a margin-bottom of 2 units for spacing between accordion items.<br/>
· <Code>rounded-lg</Code>: applies large rounded corners to the accordion.<br />
· <Code>border border-blue-gray-100</Code>: adds a light grayish-blue border.<br />
· <Code>px-4</Code>: adds padding along the x-axis (left and right sides) within the accordion.


---

<DocsTitle href="accordion-disabled">
## Accordion Disabled
</DocsTitle>

An Accordion can be disabled as well, it will help you to prevent user interactions, like click over the Accordion component.

<CodePreview link="accordion#accordion-disabled" component={<AccordionExamples.AccordionDisabled />}>
```jsx
import React from "react";
import {
  Accordion,
  AccordionHeader,
  AccordionBody,
} from "@material-tailwind/react";

export function AccordionDisabled() {
  const [open, setOpen] = React.useState(0);

  const handleOpen = (value) => setOpen(open === value ? 0 : value);

  return (
    <>
      <Accordion open={open === 1} disabled>
        <AccordionHeader onClick={() => handleOpen(1)}>What is Material Tailwind?</AccordionHeader>
        <AccordionBody>
          We&apos;re not always in the position that we want to be at. We&apos;re constantly
          growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
          ourselves and actualize our dreams.
        </AccordionBody>
      </Accordion>
      <Accordion open={open === 2}>
        <AccordionHeader onClick={() => handleOpen(2)}>
          How to use Material Tailwind?
        </AccordionHeader>
        <AccordionBody>
          We&apos;re not always in the position that we want to be at. We&apos;re constantly
          growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
          ourselves and actualize our dreams.
        </AccordionBody>
      </Accordion>
      <Accordion open={open === 3}>
        <AccordionHeader onClick={() => handleOpen(3)}>
          What can I do with Material Tailwind?
        </AccordionHeader>
        <AccordionBody>
          We&apos;re not always in the position that we want to be at. We&apos;re constantly
          growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
          ourselves and actualize our dreams.
        </AccordionBody>
      </Accordion>
    </>
  );
}
```
</CodePreview>

<br/>
In the example above, the first accordion <Code>(open === 1)</Code> is set to be disabled by passing the <Code>disabled</Code> prop. This means that this section will not be interactive and cannot be opened or closed by the user. 

---

<DocsTitle href="accordion-props">
## Accordion Props
</DocsTitle>

The component supports various props that allow you to customize its behavior and style. These are the custom props that we've added and you can use all the other native props as well.

| Attribute   | Type                      | Description                        | Default                                |
| ----------- | ------------------------- | ---------------------------------- | -------------------------------------- |
| `open`      | <Code>boolean</Code>      | Open accordion collapse            | No default value it's a required prop. |
| `icon`      | <Code>node</Code>         | Change accordion collapse end icon | <Code>undefined</Code>                 |
| `animate`   | [Animate](#types-animate) | Change accordion body animation    | <Code>undefined</Code>                 |
| `disabled`  | <Code>boolean</Code>      | Disable the accordion              | <Code>false</Code>                     |
| `className` | <Code>string</Code>       | Add custom className for accordion | `''`                                   |
| `children`  | <Code>node</Code>         | Add content for accordion          | No default value it's a required prop. |

<br />
<br />

### For TypeScript Only

```tsx
import type { AccordionProps } from "@material-tailwind/react";
```

---

<DocsTitle href="accordion-header-props">
## Accordion Header Props
</DocsTitle>

The following props are available for accordion header component. These are the custom
props that we've added for the accordion header component and you can use
all the other native props as well.

| Attribute   | Type                | Description                               | Default                                |
| ----------- | ------------------- | ----------------------------------------- | -------------------------------------- |
| `className` | <Code>string</Code> | Add custom className for accordion header | `''`                                   |
| `children`  | <Code>node</Code>   | Add content for accordion header          | No default value it's a required prop. |

<br />
<br />

### For TypeScript Only

```tsx
import type { AccordionHeaderProps } from "@material-tailwind/react";
```

---

<DocsTitle href="accordion-body-props">
## Accordion Body Props
</DocsTitle>

The following props are available for the accordion body component. These are the custom
props that we've added for the accordion body component and you can use
all the other native props as well.

| Attribute   | Type                | Description                             | Default                                |
| ----------- | ------------------- | --------------------------------------- | -------------------------------------- |
| `className` | <Code>string</Code> | Add custom className for accordion body | `''`                                   |
| `children`  | <Code>node</Code>   | Add content for accordion body          | No default value it's a required prop. |

<br />
<br />

### For TypeScript Only

```tsx
import type { AccordionBodyProps } from "@material-tailwind/react";
```

---

<DocsTitle href="types-animate">
## Types - Animate
</DocsTitle>

Use these to animate your react accordion.

```ts
type animate = {
  mount?: object;
  unmount?: object;
};
```

---

<DocsTitle href="accordion-theme">
## Accordion Theme
</DocsTitle>

Learn how to customize the theme and styles for accordion components, the theme object for accordion components has two main objects:

**A.** The <Code>defaultProps</Code> object for setting up the default value for props of accordion components.<br />
**B.** The <Code>styles</Code> object for customizing the theme and styles of accordion components.<br />

You can customize the theme and styles of accordion components by adding Tailwind CSS classes as key paired values for objects.

<br />
<br />

<DocsTitle href="accordion-theme-object-type">
## Accordion Theme Object Type
</DocsTitle>

This object allows developers to precisely control various aspects of the accordion design, including colors, fonts, and margins. The theme object is particularly useful when creating a cohesive accordion menu or accordion card that aligns with your application's overall style guide.

```ts
interface AccordionStylesType {
  defaultProps: {
    icon: node;
    className: string;
    animate: {
      mount: object;
      unmount: object;
    };
    disabled: boolean;
  };
  styles: {
    base: {
      container: object;
      header: {
        initial: object;
        active: object;
        icon: object;
      };
      body: object;
      disabled: object;
    };
  };
}
```

<br />
<br />

### For TypeScript Only

```tsx
import type { AccordionStylesType } from "@material-tailwind/react";
```

---

<DocsTitle href="accordion-theme-customization">
## Accordion Theme Customization
</DocsTitle>

Whether you're looking to modify the color palette, adjust the border styles, or apply custom animations, the theme customization options are both robust and intuitive.

The accordion design can be further enhanced using Material Tailwind's utility classes for a more refined look.

```tsx
const theme = {
  accordion: {
    defaultProps: {
      icon: undefined,
      className: "",
      animate: {
        unmount: {},
        mount: {},
      },
      disabled: false,
    },
    styles: {
      base: {
        container: {
          display: "block",
          position: "relative",
          width: "w-full",
        },
        header: {
          initial: {
            display: "flex",
            justifyContent: "justify-between",
            alignItems: "items-center",
            width: "w-full",
            py: "py-4",
            borderWidth: "border-b border-b-blue-gray-100",
            color: "text-blue-gray-700",
            fontSmoothing: "antialiased",
            fontFamily: "font-sans",
            fontSize: "text-xl",
            textAlign: "text-left",
            fontWeight: "font-semibold",
            lineHeight: "leading-snug",
            userSelect: "select-none",
            hover: "hover:text-blue-gray-900",
            transition: "transition-colors",
          },
          active: { color: "text-blue-gray-900" },
          icon: {
            ml: "ml-4",
          },
        },
        body: {
          display: "block",
          width: "w-full",
          py: "py-4",
          color: "text-gray-700",
          fontSmoothing: "antialiased",
          fontFamily: "font-sans",
          fontSize: "text-sm",
          fontWeight: "font-light",
          lineHeight: "leading-normal",
        },
        disabled: {
          pointerEvents: "pointer-events-none",
          opacity: "opacity-50",
        },
      },
    },
  },
};
```

---

<DocsTitle href="more-examples">
## Explore More Tailwind CSS Examples
</DocsTitle>

Looking for more accordion examples? Check out our <a href="https://www.material-tailwind.com/blocks/faqs" target="_blank">FAQs examples</a> from <a href="https://www.material-tailwind.com/blocks" target="_blank">Material Tailwind Blocks</a>

